import React ,{Component} from 'react';
import './app.scss';
import './iconfont.css'
class App extends Component {
  getTotaPrice = (params) => {
    let totaPrice = 0 ;
   this.state.products.map(p=>{
    if(p.checked){
      totaPrice+=p.num*p.price_new;
    }
   })
   return totaPrice;
  }
  state = {
    chiose_num:0,//已选商品数量
    totaPrice:0,//商品总价
    products:[
      {
        text_title:"啥也不是",
        price_new:"699",
        price_old:999,
        num:1,
        checked:true,
        skuid:3456,
      },
      {
        text_title:"啥玩意",
        price_new:699,
        price_old:999,
        num:2,
        checked:true,
        skuid:3457,
      }
    ]
  }
  handSub = (index) => {
  // console.log("执行了一",index)
  let products = this.state.products;
  --products[index].num;
  this.setState({
    products:products,
  }) 
  }
  handAdd = (index) => {
   //console.log("执行了＋",index)
   //下面这个写法有待优化 不是最终版本
    let products = this.state.products;
    ++products[index].num;
    this.setState({
      products:products,
    }) 
  }
render () {
  return (
    <>
      <div className="top">玩意演戏</div>
      <div className="mid">
       {/* 通过数据循坏生成模块 */}
       {
         this.state.products.map((p,index) => {
           return (
            <div className="inner" key={p.skuid}>
            <div className="inner_left">
              <i className='iconfont icon-xuanzhong-2'></i>
            </div>
            <div className="inner_mid">
              <img src="" alt="" />
            </div>
            <div className="inner_right">
              <div className="text">{p.text_title}</div>
              <div className="right_l">
                ￥{p.price_new}
              </div>
              <div className="right_r">
                <span className="sub iconfont icon-jian"
                onClick={this.handSub.bind(this,index)}
                ></span>
                <span className="num">{p.num}</span>
                <span className="add iconfont icon-jia"
                onClick={this.handAdd.bind(this,index)}
                ></span>
              </div>
            </div>
          </div>
           )
         })
       }
      </div>
      <div className="bottom">
        <div className="bottom_left iconfont icon-xuanzhongyuandian">已选（）</div>
        <div className="bottom_right">总计：￥{this.getTotaPrice()}</div>
        <div className="pay">下单</div>
      </div>
    </>
  )
 }
}
export default App
